<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin:0px 0xp 10px 0px;">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文件管理</el-breadcrumb-item>
      <el-breadcrumb-item>上传文件</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main_card">
      <el-card class="el">

        <div class="audio">
          <el-alert title="添加语音合成" type="primary" center show-icon :closable="false"></el-alert>
          <el-input placeholder="请输入要合成的语音" v-model="inputaudio" type="textarea"></el-input>
          <el-button type="primary" @click="getaddaudio()">合成</el-button>
          <audio :src="this.audiosrc" controls v-if="this.audiosrc"></audio>
        </div>

      </el-card>
      <el-card class="el">
        <div class="video">
          <el-alert title="上传视频文件" type="primary" center show-icon :closable="false"></el-alert>
          <el-upload action="https://dbyxs.xyz:3001/upload/video" :file-list="fileList" @on-change="handleChange" :http-request="getFile">
            <el-button size="small" type="primary">上传</el-button>
          </el-upload>
          <el-alert title="上传视频封面照片" type="primary" center show-icon :closable="false" style="margin:40px 0;"></el-alert>
          <el-upload action="/img/" list-type="picture-card" :limit="1" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handles">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
          <el-input placeholder="请输入视频标题名称" v-model="inputvideo" style="margin:40px 0 0 0;"></el-input>
          <el-button class="btn" size="small" type="success" @click="getaddvideo">确认上传</el-button>
        </div>
      </el-card>
      <el-card class="el">
        <div class="file">
          <el-alert title="请上传文件" type="primary" center show-icon :closable="false" style="margin:40px 0;"></el-alert>
          <el-upload action="https://dbyxs.xyz:3001/api/file" :file-list="fileList1" @on-change="handleChange1" :http-request="getFile1">
            <el-button size="small" type="primary">上传</el-button>
          </el-upload>
          <el-input placeholder="请输入文件名称" v-model="inputfile" style="margin:40px 0 0 0;"></el-input>
          <el-button class="btn" size="small" type="success" @click="getaddfile">确认上传</el-button>
        </div>
      </el-card>
    </div>

  </div>
</template>
<script>
export default {
  inject: ['reload'],
  data() {
    return {
      inputaudio: '', // 要转换的文字
      userid: this.$store.state.userid || localStorage.getItem('userid'),
      audiosrc: '', // 返回的音频地址
      file: {},
      fileList: [],
      file1: {},
      fileList1: [],
      inputfile: '',
      videosrc: '', // 返回的视频地址
      filesrc: '', // 返回的文件地址
      inputvideo: '', // 视频的标题
      dialogVisible: false,
      dialogImageUrl: '',
      videoimage: ''
    }
  },
  created() {
    this.gettoken()
  },
  methods: {
    gettoken() {
      this.$store.dispatch('getuserid')
      console.log(this.userid)
    },
    // 添加语音合成
    getaddaudio() {
      // console.log(data)
      this.$http.get('https://dbyxs.xyz:3001/api/audio', { params: { text: this.inputaudio }}).then(res => {
        console.log(res.data.data)
        this.audiosrc = res.data.data
        const data = {
          userid: this.userid,
          audio: this.audiosrc
        }
        if (res.data.data) {
          this.$http.post('/audio/add', data).then(res => {
            console.log(res)
            if (res.data.err_code === 0) {
              this.$message.success('添加成功')
              // this.reload()
            }
          })
        }
      })
    },
    handleChange() { },

    // 文件上传回调
    getFile1(item) {
      console.log(item.file)
      this.file1 = item.file
    },
    // 添加视频合成http://dbyxs.xyz:3020/upload/video
    // 视频上传回调
    getFile(item) {
      console.log(item.file)
      this.file = item.file
    },
    getaddvideo() {
      const fd = new FormData()
      fd.append('file', this.file)
      console.log(this.file)
      const data = {
        c: '你还'
      }
      const config = { headers: { 'Content-Type': 'multipart/form-data' }}
      this.$http.post('https://dbyxs.xyz:3001/upload/video', fd, config
      ).then(response => {
        console.log(response)
        // console.log(response.data.data)
        this.videosrc = response.data.data
        const data = {
          userid: this.userid,
          img: this.videoimage,
          video: this.videosrc,
          videoname: this.inputvideo
        }
        if (response.data.data) {
          this.$http.post('/video', data).then(res => {
            console.log(res)
            if (res.data.err_code === 0) {
              this.$message.success('添加成功')
              this.reload()
            }
          })
        }
        this.$message.success(response.retCode)
      })
    },
    // 添加文件上传
    getaddfile() {
      const fd = new FormData()
      fd.append('file', this.file1)
      const config = { headers: { 'Content-Type': 'multipart/form-data' }}
      this.$http.post('https://dbyxs.xyz:3001/api/file', fd, config
      ).then(response => {
        console.log(response)
        this.filesrc = response.data.data
        const data = {
          file: this.filesrc,
          filename: this.inputfile
        }
        if (response.data.data) {
          this.$http.post('/file', data).then(res => {
            console.log(res)
            if (res.data.err_code === 0) {
              this.$message.success('上传成功')
              this.reload()
            }
          })
        }
        //  this.$message.success(response.retCode)
      })
    },
    // 视频图片上传
    handlePictureCardPreview(file) {
      this.dialogVisible = true
      this.dialogImageUrl = file.url
    },
    // 视频图片上传
    handleRemove() { },
    handleChange1() { },
    // 视频图片上传
    handles(file) {
      console.log(file)
      this.videoimage = file.data
    }
  }
}
</script>
<style lang="less" scoped>
.main_card {
  width: 100%;
  //  float: left;
  height: 100vh;
  display: flex;
  flex-direction: row;
  // justify-content: flex-start;
}
.el {
  flex: 1;
}
.audio {
  // flex: 1;
  width: 100%;
  height: 100vh;
  //   background-color: red;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  .el-input {
    margin: 20px 50px;
  }
  .el-button {
    margin: 100px 0;
  }
}
.video {
  width: 100%;
  height: 100vh;
  // background-color: orange;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .el-upload {
    margin: 40px 0;
  }
  .btn {
    margin: 100px 0;
  }
}
.file {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  // background-color: red;
  .btn {
    margin: 50px 0;
  }
}
</style>

